<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <el-button
          type="success"
          @click="xinZeng"
          style="float: right;margin-bottom: 10px;margin-right: 40px; "><i class="el-icon-edit"></i>  新增试题</el-button>
        </el-row>
        <!-- 搜索 -->
        <el-form :inline="true"  label-width="70px">
          <el-form-item label="学科">
            <el-select v-model="formList.xueke1" @change="xuekeChange"  placeholder="请选择" style="width: 190px;">
              <el-option
              v-for="item in xueke"
              :key="item.id"
              :value="item.id"
              :label="item.subjectName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select v-model="formList.catalogID" placeholder="请选择" style="width: 190px;">
              <el-option
              v-for="(item, index) in erMulu"
              :key="index"
              :value="item"
              :label="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="formList.tags" placeholder="请选择" style="width: 190px;">
              <el-option
              v-for="(item, index) in agsList"
              :key="index"
              :value="item"
              :label="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input v-model="formList.keyword" placeholder="" style="width: 190px;"></el-input >
          </el-form-item>
          <el-form-item label="试题类型">
            <el-select v-model="formList.questionType" placeholder="请选择" style="width: 190px;">
              <el-option label="单选" value="1"></el-option>
              <el-option label="多选" value="2"></el-option>
              <el-option label="简单" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select v-model="formList.difficulty" placeholder="请选择" style="width: 190px;">
              <el-option label="简单" value="1"></el-option>
              <el-option label="一般" value="2"></el-option>
              <el-option label="困难" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select v-model="formList.direction" placeholder="请选择" style="width: 190px;">
              <el-option label="o2o" value="o2o"></el-option>
              <el-option label="外包服务" value="外包服务" ></el-option>
              <el-option label="企业服务" value="企业服务" ></el-option>
              <el-option label="互联网金融" value="互联网金融" ></el-option>
              <el-option label="企业咨询" value="企业咨询" ></el-option>
              <el-option label="互联网" value="互联网" ></el-option>
              <el-option label="电子商务" value="电子商务" ></el-option>
              <el-option label="其它" value="其它" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select v-model="formList.creatorID" placeholder="请选择" style="width: 190px;">
              <el-option
              v-for="item in luRuRen"
              :key="item.id"
              :value="item.id"
              :label="item.username"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input v-model="formList.user" placeholder="" style="width: 190px;"></el-input>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="formList.user" placeholder="" style="width: 190px;"></el-input>
          </el-form-item>
          <el-form-item label="省">
                  <el-select
                    style="width: 95px;"
                    filterable
                    @change="sheng11"
                    v-model="formList.sheng1"
                  >
                    <el-option v-for="(item, index) in sheng" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                  <el-select
                    style="width: 95px;"
                    filterable
                    v-model="formList.shi1"
                  >
                    <el-option
                      v-for="(item, index) in shi"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
          </el-form-item>
          <el-form-item style="float: right;margin-right: 40px;">
            <el-button type="primary" @click="clear">清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        > 一共加载{{alertText}}条数据</el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table
          element-loading-text="给我一点时间"
          :data="tableData"
          highlight-current-row
          style="width: 100%; margin-top: 10px"
          border
        >
          <el-table-column align="center" label="试题编号">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="学科">
            <template slot-scope="scope">
              <span>{{scope.row.subject}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="目录">
            <template slot-scope="scope">
              <span>{{scope.row.catalogID}}</span>
            </template>
          </el-table-column>
          <el-table-column label="题型">
            <template slot-scope="scope">
              <span>{{scope.row.tags}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="题干">
            <template slot-scope="scope">
              <span>{{scope.row.creatorID}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间">
            <template slot-scope="scope">
              <span>{{dateForma(scope.row.addDate)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="难度">
            <template slot-scope="scope">
              <span>{{scope.row.remarks}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入人">
            <template slot-scope="scope">
              <span v-if="scope.row.state==1">启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="info" icon="el-icon-view" @click="yuLan(scope.row)" circle></el-button>
              <el-button type="primary" icon="el-icon-edit" @click="xiuGan(scope.row.id)" circle></el-button>
              <el-button type="danger" icon="el-icon-delete" @click="shanChu(scope.row)" circle></el-button>
              <el-button type="success" icon="el-icon-check" @click="jingXuan(scope.row)" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->

        <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[5, 10, 15]"
              layout="sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 新增标签弹层 -->
        <Dialog ref="editUser" :titleInfo="titleInfo" :checkedArr="checkbox" :radioArr="radio"></Dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import { list as newList } from '@/api/hmmm/subjects'
import { list as erList } from '@/api/hmmm/directorys'
import { list as tagsList } from '@/api/hmmm/tags'
import { list as userList } from '@/api/base/users'
import Dialog from '../components/questions-kid'
import { provinces, citys } from '@/api/hmmm/citys'
import moment from 'moment'
export default {
  components: {
    Dialog
  },
  data () {
    return {
      titleInfo: { // 传给弹出框的单个具体数据
        // subjectID: '', // 学科
        // difficulty: '', // 难度
        // questionType: '', // 试题类型
        // tags: '', // 标签名称
        // province: '', // 企业所在地省份
        // city: '', // 企业所在城市
        // keyword: '', // 关键字
        // remarks: '', // 题目备注
        // shortName: '', // 企业简称
        // direction: '', // 方向
        // creatorID: '', // 录入人
        // catalogID: ''// 目录
      },
      tableData: [], // 列表数据
      requestParameters: { // 显示页数加条数
        page: 1, // 当前页数
        pagesize: 10 // 当前条数
      },
      alertText: 0, // 提示多少天数据
      total: null, // 总数
      formList: { // 接收from表单的数据
        xueke1: '', // 获取学科下拉框数据
        sheng1: '', // 获取省下拉框数据
        shi1: '', // 获取市下拉数据
        catalogID: '', // 获取二级目录下拉表
        tags: '', // 获取标签目录下拉表
        questionType: '', // 获取试题类型下拉列表
        difficulty: '', // 获取难度下拉菜单列表
        direction: '', // 获取方向下拉菜单列表
        creatorID: '',
        keyword: ''
      },
      checkbox: [], // 传给子的多选数组
      radio: '', // 传给子的单选按钮
      xueke: [], // 渲染学科下拉列表数据
      erMulu: [], // 渲染二级目录下拉列表数据
      agsList: [], // 渲染标签下拉列表数据
      sheng: [], // 渲染省份下拉列表数据
      shi: [], // 渲染市份下拉列表数据
      luRuRen: [], // 渲染录入人下拉列表数据
      creatorID: null
    }
  },
  methods: {
    getList () { // 获取列表
      // this.requestParameters.subjectID = ''
      list(this.requestParameters).then(res => {
        this.tableData = res.data.items
        this.total = res.data.counts
        this.alertText = this.total
        // console.log(res.data.items)
        // console.log(this.tableData)
      })
    },
    handleSizeChange (val) { // 每页显示信息条数
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    handleCurrentChange (val) { // 进入某一页
      this.requestParameters.page = val
      this.getList()
    },
    yuLan (data) { // 预览功能
      this.$refs.editUser.dialogFormV()
      detail(data).then(res => {
        // console.log(res.data)
        this.titleInfo = res.data // 给子组件传的信息
        if (this.titleInfo.questionType === '1') { // 给子组件 单选按钮传的信息
          const newArr = this.titleInfo.options.filter(item => item.isRight === 1)
          this.radio = newArr[0].title
        } else if (this.titleInfo.questionType === '2') { // 给子组件 多选按钮传的信息
          const newArr = this.titleInfo.options.filter(item => item.isRight === 1)
          this.checkbox = newArr.map(item => {
            return item.title
          })
        }
      })
    },
    xiuGan (data) { // 修改文章(跳转)
      this.$router.push({
        path: 'new',
        query: { id: data }
      })
    },
    jingXuan (val) { // 精选
      this.$confirm('你确定加入精选吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '加入精选成功'
        })
        const data = {
          id: val.id,
          choiceState: 1
        }
        choiceAdd(data).then(res => {
          this.$router.push({
            path: 'choice'
          })
        })
      })
    },
    xinZeng () { // 新增
      this.$router.push({
        path: 'new'
      })
    },
    shanChu (data) { // 删除文章
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(data).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    onSubmit () { // 搜索按钮
      // console.log('我是新获取的值' + this.formList.xueke1)
      this.requestParameters = {
        ...this.requestParameters,
        subjectID: this.formList.xueke1,
        keyword: this.formList.keyword
      }
      this.getList()
    },
    clear () { // 清除按钮
      // 请求参数初始化为空
      this.formList = {}
      // this.requestParameters = {
      //   ...this.requestParameters
      //   // subjectID: this.formList.xueke1
      // }
      // console.log(this.requestParameters)
      // this.requestParameters: { // 显示页数加条数
      //   page : 1, // 当前页数
      //   pagesize : 10 // 当前条数
      // }
      this.requestParameters.page = 1
      this.requestParameters.pagesize = 10
      this.requestParameters.subjectID = null
      this.requestParameters.keyword = ''
      this.getList()
    },
    dateForma (date) { // 处理时间
      return moment(date).format('YYYY-MM-DD')
    },
    getMulu () { // 获取目录列表
      const data = {
        pagesize: 20
      }
      newList(data).then(res => { // 获取学 科列表
        this.xueke = res.data.items
      })
      this.sheng = provinces() // 获取省列表
      userList().then(res => { // 获录入人列表
        this.luRuRen = res.data.list
      })
    },
    sheng11 (val) { // 获取省下面的市
      this.shi = citys(val)
    },
    xuekeChange (val) { // 获取二级目录列表
      const data = {
        subjectID: val
      }
      erList(data).then(res => { // 获取二级目录
        console.log(res)
        const newArr = res.data.items.map(item => {
          return item.directoryName
        })
        this.erMulu = newArr
      })
      tagsList(data).then(res => { // 获取标签列表
        const newArr = res.data.items.map(item => {
          return item.tagName
        })
        this.agsList = newArr
      })
    }
  },
  mounted () {
    this.getList()
    this.getMulu()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
